<link rel="stylesheet" href="/CSS/editEncyclopedia.css">

<style>
    .top .poster {
        width: 240px;
        height: 340px;
    }

    .container {
        width: 1000px;
    }

    .textbox {
        text-align: left;
    }

    .bottomform input {
        margin-left: 10px;
        width: 320px;
    }

    .textcontent {
        margin-left: 10px;
    }

    .layui-select {
        height: 34px;
    }

    .table .name {
        background-color: #fff;
        width: 140px;
    }

    .layui-laydate .layui-this {
        background-color: #1E9FFF !important;
        color: #fff !important;
    }

    .tableWidth {
        width: 500px;
    }
</style>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
        <legend><i class="fa fa-file-text-o"></i> 专 题 文 献 </legend>
        <span style="color:rgb(172, 168, 168);"> 注意：表格中带<span style="color: red;">*</span>为必填项</span><br>
        <input type="text" name="showSortId"
            style="border: none;color:rgb(172, 168, 168);width: 320px;text-align: center;">
    </fieldset>
    <div class="container">
        <form class="layui-form">
            <!-- 表单 -->
            <ul class="table flex-c-j">
                <li class="top flex">
                    <!-- 左侧输入框 -->
                    <ul class="form flex-column-s">
                        <!-- 下 -->
                        <li class="bottomform">
                            <!-- 左边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">标题<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="title" autocomplete="off" class="layui-input"
                                            style="height:34px;width:320px;margin-left: 10px;" lay-verify="required"
                                            lay-reqText="标题不能为空！" placeholder="请输入标题">
                                    </div>
                                </li>
                                <li class="one">
                                    <span class="name">所属专题集<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="ztjName" id="ztjName" autocomplete="off"
                                            class="layui-input" style="height:34px;width:320px;margin-left: 10px;"
                                            lay-verify="required" readonly lay-reqText="所属专题集不能为空！"
                                            placeholder="请选择所属专题集">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">发表时间<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="publishDate" placeholder="请选择发表时间" autocomplete="off"
                                            class="layui-input date" style="height:34px;width:320px;margin-left: 10px;"
                                            lay-verify="required" lay-reqText="发表时间不能为空！">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">文献来源：</span>
                                    <div class="textbox">
                                        <input name="literatureSources" id="" class="borderNone" type="text"
                                            style="width:300px;" placeholder="请输入文献来源">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">关键词：</span>
                                    <div class="textbox">
                                        <input name="keyWord" class="borderNone" type="text" style="width:300px;"
                                            placeholder="请输入关键词,多个关键词以英文分号;分隔">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">专题文献序号：</span>
                                    <div class="textbox">
                                        <input name="ztSortId" id="ztSortId" class="borderNone" type="number"
                                            style="width:300px;" readonly placeholder="选择专题集和专题后可输入专题序号"
                                            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}">
                                    </div>
                                </li>
                            </ul>
                            <!-- 右边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">所属领域<span style="color: red;">*</span>：</span>
                                    <div class="textbox textleft">
                                        <select name="field" id="field" lay-verify="required" lay-reqText="领域不能为空！">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                </li>
                                <li class="one">
                                    <span class="name">所属专题<span style="color: red;">*</span>：</span>
                                    <div class="textbox">
                                        <input type="text" name="ztName" id="ztName" autocomplete="off"
                                            class="layui-input" style="height:34px;width:320px;margin-left: 10px;"
                                            lay-verify="required" readonly lay-reqText="所属专题不能为空！"
                                            placeholder="请选择所属专题">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">作者：</span>
                                    <div class="textbox">
                                        <input name="author" id="" class="borderNone" type="text" style="width:300px;"
                                            placeholder="请输入作者，多个作者请以英文分号;分隔">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">语言：</span>
                                    <div class="textbox">
                                        <input name="language" id="" class="borderNone" type="text" style="width:300px;"
                                            placeholder="请输入语言">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">录入人：</span>
                                    <div class="textbox" style="text-align:left ;">
                                        <input name="recorderName" id="chooseUser" class="borderNone" type="text"
                                            disabled style="width: 230px;margin-left: 10px;">
                                        <button onclick="editRecorder();" type="button"
                                            style="width: 60px;height: 34px;line-height: 24px;margin-left: 5px;border: 1px solid  #a4a2a2;font-size: 14px;margin-top: 10px;background-color: #fff;"><i
                                                class="layui-icon layui-icon-edit"></i>修改</a></button>
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">原文件：</span>
                                    <div class="textbox" style="text-align:left ;">
                                        <button type="button" id="upload"
                                            style="width: 90px;height: 30px;line-height: 30px;background-color: #1E9FFF;border: 1px solid  #1E9FFF;font-size: 14px;color: #ffffff;border-radius: 5px;margin-top: 10px;margin-left: 10px;"><i
                                                class="layui-icon"></i> 原文件</button>
                                        <span id="digitFileNameSpan" title=""
                                            style="display: inline-block;width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></span>
                                        <button type="button" id="deleteFile" lay-submit="" lay-filter="deleteFile"
                                            style="font-size: small;display: none;">删除</button>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!-- 摘要 -->
                <li class="one" style="display: flex;justify-content: center;">
                    <span class="name big">摘要：</span>
                    <div class="textbox">
                        <textarea name="summary" id="" class="borderNone textcontent"
                            style="width: 800px;margin-left: 10px;height:100px" placeholder="请输入内容"></textarea>
                    </div>
                </li>
                <!-- 全文 -->
                <li class="one" style="display: flex;justify-content: center;">
                    <span class="name big">全文：</span>
                    <div class="textbox">
                        <textarea name="text" id="" class="borderNone textcontent"
                            style="width: 800px;margin-left: 10px;height:100px" placeholder="请输入内容"></textarea>
                    </div>
                </li>
            </ul>
            <button class="layui-btn" lay-submit="" lay-filter="save"
                style="margin-top:20px;background-color: #FFB800;font-size: 14px;color: #ffffff;border-radius: 5px;margin-left: 800px;margin-bottom: 20px;">立即提交</button>
            <button class="layui-btn" onclick="fn_Close();" type="button"
                style="margin-top:20px;background-color: #cccccc;font-size: 14px;color: #ffffff;border-radius: 5px;margin-bottom: 20px;">取消提交</button>
            <div hidden>
                <input type="text" name="organ">
                <input type="text" name="sysID">
                <input type="text" name="digitFileName">
                <input type="text" name="recorder" id="chooseUserNo">
                <input type="text" name="needDelete" id="needDelete">
                <input type="text" name="newDigitFileName">
                <input type="text" name="ztjId" id="ztjId">
                <input type="text" name="ztId" id="ztId">
                <input type="text" name="maxZTWXId" id="maxZTWXId">
                <input type="text" name="beforeSortId">
            </div>
        </form>
    </div>
    <script>
        $(function () {
            //填入默认domain 的 option
            for (var index = 0; index < config.json.domain.length; index++) {
                var obj = config.json.domain[index]
                $("#field").append("<option value=" + obj.dbCode + ">" + obj.showName + "</option>");
            }

            //自动填入录入人
            if (parent.opreatType == "add") {
                if (shared.getCookie('userinfo')) {
                    var userInfo = JSON.parse(shared.getCookie('userinfo'));
                    $("input[name='recorder']").val(userInfo.id)
                    $("input[name='recorderName']").val(userInfo.name)
                }
            }
            // 编辑
            if (parent.opreatType == "edit") {
                var parent_json = parent.editData;
                $("input[name='sysID']").val(parent_json.sysID)
                $("input[name='recorder']").val(parent_json.recorder)
                $("input[name='recorderName']").val(parent_json.recorderName)
                $("input[name='field']").val(parent_json.field)
                $("input[name='title']").val(parent_json.title)
                $("input[name='keyWord']").val(parent_json.keyWord)
                $("input[name='literatureSources']").val(parent_json.literatureSources)
                $("input[name='author']").val(parent_json.author)
                $("input[name='ztName']").val(parent_json.ztName)
                $("input[name='ztId']").val(parent_json.ztId)
                $("input[name='ztSortId']").val(parent_json.ztSortId)
                $("input[name='beforeSortId']").val(parent_json.ztSortId)
                $("input[name='ztjName']").val(parent_json.ztjName)
                $("input[name='ztjId']").val(parent_json.ztjId)
                $("input[name='publishDate']").val(parent_json.publishDate)
                $("input[name='language']").val(parent_json.language)
                $("input[name='digitFileName']").val(parent_json.digitFileName)
                $("textarea[name='summary']").val(parent_json.summary)
                $("textarea[name='text']").val(parent_json.text)
                selectedNumber(parent_json.field, "field")
                $("#digitFileNameSpan").text(parent_json.digitFileName);
                $("#digitFileNameSpan").attr("title", parent_json.digitFileName);
                if (parent_json.digitFileName != null && parent_json.digitFileName != "") {
                    $('#deleteFile').show();
                }
                getSortId("before");
            }
        })

        $("#ztSortId").on("click", function () {
            if ($("input[name='ztjName']").val() == "") {
                layui.layer.msg('请选择专题集！', { icon: 7, time: 1000 })
            } else if ($("input[name='ztjName']").val() != "" && $("input[name='ztName']").val() == "") {
                layui.layer.msg('请选择专题！', { icon: 7, time: 1000 })
            }
        });

        //下拉框默认选中
        function selectedNumber(getValue, selectNo) {
            var all = document.getElementById(selectNo); //获取select下拉框的所有值
            for (var j = 1; j < all.length; j++) {
                if (all[j].text == getValue) {
                    $(all[j]).attr("selected", "selected");
                }
            }
        }

        //渲染页面
        layui.form.render();

        //渲染日期插件
        lay('.date').each(function () {
            layui.laydate.render({
                elem: this,//元素
            });
        });

        //文件上传
        layui.upload.render({
            headers: { token: shared.getCookie('token') },
            elem: '#upload'
            , url: config.server + '/adminQBZS/tempUpload'
            , accept: 'file' //普通文件
            // , exts: 'pdf|ppt|docx|doc' //只允许pdf,ppt,word
            , size: 512000//设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            , before: function (obj) {
                showloading(true);
            }
            , done: function (res) {
                showloading(false);
                if (res.code == 200) {
                    layer.msg('上传成功');
                    $('#deleteFile').show();
                    if (parent.opreatType == "edit") {
                        $("input[name='newDigitFileName']").val(res.data)
                    } else {
                        $("input[name='digitFileName']").val(res.data)
                    }
                    $("#digitFileNameSpan").text(res.data);
                    $("#digitFileNameSpan").attr("title", res.data);
                } else {
                    layer.msg('上传失败,' + res.msg);
                }
            }
        });

        //监听删除文件按钮
        layui.form.on('submit(deleteFile)', function (data) {
            layer.confirm('确定删除？', function (index) {
                var fileName = $("input[name='digitFileName']").val();
                $('#deleteFile').hide();
                $("#digitFileNameSpan").text("");
                $("input[name='needDelete']").val(fileName)
                $("input[name='digitFileName']").val('')
                layer.close(index);
            });
        });

        //监听提交操作
        layui.form.on('submit(save)', function (data) {
            data.field.organ = $("input[name='literatureSources']").val();
            var ztSortId = Number($("input[name='ztSortId']").val());
            var maxztSortId = Number($("input[name='maxZTWXId']").val());
            if (ztSortId < 0 || ztSortId > maxztSortId) {
                layui.layer.msg('专题文献序号超出范围！', { icon: 7, time: 1000 });
                return false;
            } else {
                if (parent.opreatType == "add") {
                    layer.confirm('确定保存当前页面吗？', function (index) {
                        saveFile('/adminTechnicalBag/insertZTWX', data.field, index);
                    });
                } else {
                    layer.confirm('确定保存当前页面吗？', function (index) {
                        saveFile('/adminTechnicalBag/updateZTWX', data.field, index);
                    });
                }
                return false;
            }
        })

        //显示loading
        function showloading(t) {
            if (t) {//如果是true则显示loading
                loading = layer.load(1, {
                    shade: [0.5, '#000'], //0.1透明度的白色背景
                    content: '<p style="position: relative;left: -50px;">资源上传中，请稍候...</p>',
                    success: function (layerContentStyle) {
                        layerContentStyle.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'text-align': 'left',
                            'line-height': '30px',
                            'color': '#333',
                            'width': '300px'
                        })
                    }
                });
            } else {//如果是false则关闭loading
                layer.closeAll('loading');
            }
        }

        function saveFile(url, dataObj, index) {
            $.ajax({
                headers: { token: shared.getCookie('token') },
                type: 'POST',
                url: config.server + url,
                contentType: 'application/json',
                dataType: "json",
                data: typeof dataObj === 'object' ? JSON.stringify(dataObj) : dataObj,
                beforeSend: function () {
                    showloading(true);
                    layer.close(index);
                },
                success: function (data) {
                    layer.closeAll();
                    showloading(false);
                    parent.tableRender(parent.tableBar, parent.collectParams())
                },
            });
        }

        function getSortId(type) {
            var chooseZtjId = $("input[name='ztjId']").val();
            var chooseZtId = $("input[name='ztId']").val();
            $('#ztSortId').removeAttr("readonly");
            shared.ajaxGet(config.getMaxZTWXId, { ztjId: chooseZtjId, ztId: chooseZtId }, function callback(res) {
                var maxSortId = 1;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                // if (type == "before") {
                //     if (res != "") {
                //         maxSortId = parseInt(res[0].ztSortId);
                //     }
                // } else {
                //     if (res != "") {
                //         if (parent.opreatType == "edit") {
                //             var parent_json = parent.editData;
                //             if (chooseZtjId == parent.editData.ztjId && chooseZtId == parent.editData.ztId) {
                //                 maxSortId = parent.editData.ztSortId;
                //             } else {
                //                 maxSortId = parseInt(res[0].ztSortId) + 1;
                //             }
                //         }
                //     }
                //     $("input[name='ztSortId']").val(maxSortId)
                //     $("input[name='beforeSortId']").val(maxSortId)
                // }
                if (res != "") {
                    if (parent.opreatType == "add") {
                        maxSortId = parseInt(res[0].ztSortId) + 1;
                        $("input[name='ztSortId']").val(maxSortId)
                        $("input[name='beforeSortId']").val(maxSortId)
                    } else {
                        if (chooseZtjId == parent.editData.ztjId && chooseZtId == parent.editData.ztId) {
                            maxSortId = parseInt(res[0].ztSortId);
                            $("input[name='ztSortId']").val(parent.editData.ztSortId)
                            $("input[name='beforeSortId']").val(parent.editData.ztSortId)
                        } else {
                            maxSortId = parseInt(res[0].ztSortId) + 1;
                            $("input[name='ztSortId']").val(maxSortId)
                            $("input[name='beforeSortId']").val(maxSortId)
                        }
                    }
                } else {
                    $("input[name='ztSortId']").val(maxSortId)
                    $("input[name='beforeSortId']").val(maxSortId)  
                }
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                $("input[name='maxZTWXId']").val(maxSortId)
                $("input[name='showSortId']").val("序号范围：1~" + maxSortId + "，若序号已存在，则交换序号")
            });
        }

        /** 设置关闭按钮的click事件处理 */
        function fn_Close() {
            layer.confirm('确定取消保存当前页面吗？', function (index) {
                layer.closeAll();
            });
        }

        //监听修改录入人
        function editRecorder() {
            layer.open({
                type: 2,
                id: "recorder",
                title: "修改录入人",
                area: ['720px', '520px'],
                fixed: false, //不固定
                maxmin: true,
                offset: ['15%', '15%'],//设置位移
                cancel: function () { },
                content: 'mypages/knowledgeManagement/editRecorder.html',
                success: function (layero, index) {
                }
            });
        };

        $("#ztName").on("click", function () {
            searchType = "add";
            if ($("input[name='ztjName']").val() == "") {
                layui.layer.msg('请先选择专题集！', { icon: 7, time: 1000 })
            } else {
                chooseZtjId = $("input[name='ztjId']").val();
                var content = layui.miniPage.getHrefContent('mypages/knowledgeManagement/ztList.html'),
                    openWH = layui.miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '选择专题',
                    id: "zt",
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    offset: '100px',
                    area: ['450px', '500px'],
                    content: content,
                    btn: ['确认'],
                    yes: function (index, layero) {
                        // 判断是否有值
                        if (!$("#ztName").val()) {
                            layui.layer.msg('专题不能为空！', { icon: 7, time: 1000 })
                        } else {
                            getSortId("after");
                            layer.close(index);
                        }
                    },
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

        $("#ztjName").on("click", function () {
            searchType = "add";
            var content = layui.miniPage.getHrefContent('mypages/knowledgeManagement/ztjList.html'),
                openWH = layui.miniPage.getOpenWidthHeight();
            var index = layer.open({
                title: '选择专题集',
                id: "ztj",
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                offset: '100px',
                area: ['450px', '500px'],
                content: content,
                btn: ['确认'],
                yes: function (index, layero) {
                    // 判断是否有值
                    if (!$("#ztjName").val()) {
                        layui.layer.msg('专题集不能为空！', { icon: 7, time: 1000 })
                    } else {
                        $("input[name='ztName']").val("")
                        $("input[name='ztId']").val("")
                        $("input[name='ztSortId']").val("")
                        layer.close(index);
                    }
                },
            });

            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        });
    </script>
</body>

</html>